<template>
	<view v-if="handleDetail">
		<fa-navbar title="资产处置详情"></fa-navbar>
		<u-gap height="30" bg-color="#F6F8FB"></u-gap>
		<view class="p-3 flex-column-center">
			<view class="flex-center">
				<u-image v-if="handleDetail.ApproveState == 'ASSET_APPROVE_0001'" width="62" height="74" src="../../static/images/examine01.svg"></u-image>
				<u-image v-else-if="handleDetail.ApproveState == 'ASSET_APPROVE_0002'" width="62" height="74" src="../../static/images/examine03.svg"></u-image>
				<u-image v-else width="62" height="74" src="../../static/images/examine02.svg"></u-image>
				<text class="pl-1 font36 col-main">{{ handleDetail.ApproveStateText }}</text>
			</view>
			<view class="fa-handle-desc">{{ handleTipsText }}</view>
		</view>
		<u-gap height="30" bg-color="#F6F8FB"></u-gap>
		<view class="px-2">
			<h1 class="h1-font py-m24 f-w500">处置信息</h1>
			<u-row gutter="0">
				<u-col class="py-m24 u-border-bottom">
					<view class="m-col m-col6 col-main">处置类型</view><view class="m-col m-col18 col-mark">{{ handleDetail.HandleTypeText }}</view>
				</u-col>
				<!-- 资产转移内容 -->
				<template v-if="handleDetail.HandleType == 'ASSET_HANDLE_0005'">
					<u-col class="py-m24 u-border-bottom">
						<view class="m-col m-col6 col-main">所属房产</view><view class="m-col m-col18 col-mark">{{ handleDetail.OrgName }}</view>
					</u-col>
					<u-col class="py-m24 u-border-bottom">
						<view class="m-col m-col6 col-main">目标房产</view><view class="m-col m-col18 col-mark">{{ handleDetail.TargetOrgName || '--' }}</view>
					</u-col>
					<u-col class="py-m24 u-border-bottom">
						<view class="m-col m-col6 col-main">完成时间</view><view class="m-col m-col18 col-mark">{{ handleDetail.DayLimit }}天</view>
					</u-col>
				</template>
				<u-col class="py-m24">
					<view class="m-col m-col6 col-main">备注</view><view class="m-col m-col18 col-mark">{{ handleDetail.Describe || '--'}}</view>
				</u-col>
			</u-row>
		</view>
		<u-gap height="30" bg-color="#F6F8FB"></u-gap>
		<view class="px-2">
			<h1 class="h1-font py-m24 f-w500">申请/审核信息</h1>
			<u-row gutter="0">
				<u-col class="py-m24 u-border-bottom flex-vertical-center">
					<view class="m-col m-col6 col-main">申请人</view><view class="m-col m-col18 col-mark">{{ handleDetail.ApplyUserName }}</view>
				</u-col>
				<u-col class="py-m24 flex-vertical-center">
					<view class="m-col m-col6 col-main">申请时间</view><view class="m-col m-col18 col-mark">{{ handleDetail.CreateTime | dateFormat }}</view>
				</u-col>
				<!-- 审核通过/审核不通过 -->
				<template v-if="handleDetail.ApproveState == 'ASSET_APPROVE_0002' || handleDetail.ApproveState == 'ASSET_APPROVE_0003'">
					<u-col class="py-m24 u-border-bottom flex-vertical-center">
						<view class="m-col m-col6 col-main">审核人</view><view class="m-col m-col18 col-mark">{{ handleDetail.ApproveUserName }}</view>
					</u-col>
					<u-col class="py-m24 u-border-bottom flex-vertical-center">
						<view class="m-col m-col6 col-main">审核时间</view><view class="m-col m-col18 col-mark">{{ Number(handleDetail.ApproveTime) | dateFormat }}</view>
					</u-col>
					<template v-if="handleDetail.ApproveState == 'ASSET_APPROVE_0003'">
						<u-col class="py-m24 u-border-bottom flex-vertical-center">
							<view class="m-col m-col6 col-main">不通过原因</view>
							<view class="m-col m-col18 col-mark">
								{{ handleDetail.Reason.split('#&#')[0] }}
							</view>
						</u-col>
						<u-col class="py-m24 u-border-bottom flex-vertical-center">
							<view class="m-col m-col6 col-main">反馈</view><view class="m-col m-col18 col-mark">{{ handleDetail.Reason.split('#&#')[1] }}</view>
						</u-col>
					</template>
				</template>
			</u-row>
		</view>
		<u-gap height="30" bg-color="#F6F8FB"></u-gap>
		<view class="px-2" v-if="handleDetail">
			<view class="flex-between-center col-main">
				<h1 class="h1-font py-m24 f-w500">资产信息</h1>
				<text class="font24">共{{ handleDetail.Assets.length }}件</text>
			</view>
		</view>
		<view v-for="(item, idx) in handleDetail.Assets" :key="idx">
			<u-gap height="10" bg-color="#F6F8FB"></u-gap>
			<view class="px-2">
				<view class="u-border-bottom col-gray font24 p-m24">{{ item.EpcId }}</view>
				<view class="py-1 px-m24 d-flex" style="justify-content: start;">
					<u-image border-radius="12" width="128" height="128" :src="item.ImgUrls.length > 0 ? item.ImgUrls[0] : '/static/images/icon_assets.svg'"></u-image>
					<view class="pl-1" style="width: 492rpx;">
						<h1 class="font28 u-line-1 col-main f-w500">{{ item.AssetName }}</h1>
						<view class="col-mark mt-x1">
							<view>{{ item.OrgName }}</view>
							<view class="flex-between mt-x1">
								<text>{{ item.AssetTypeText }}</text><text>{{ item.Num || '1件' }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<template v-if="handleDetail.ApproveState == 'ASSET_APPROVE_0001'">
			<u-gap height="140" bg-color="#ffffff"></u-gap>
			<view class="pos-fix fullwidth bg-ff px-2 py-1" style="bottom: 0;left: 0;">
				<view class="flex-between-end font32">
					<u-button class="ml-0 mr-m2 btn-plain" type="primary" shape="circle" plain style="width: 212rpx;" @click="toPage">驳回</u-button>
					<u-button class="btn-grad m-0" type="primary" shape="circle" style="width: 212rpx;" @click="showModal = true">通过</u-button>
				</view>
			</view>
		</template>
		<u-modal 
			v-model="showModal"
			:content="contentModal" 
			title="确认审核通过？"
			:title-style="{'font-size': '36rpx', 'color': '#2A2A2A'}"
			:content-style="{'font-size': '32rpx', 'color': '#4F5053'}"
			:cancel-style="{'font-size': '36rpx', 'color': '#2A2A2A'}"
			:confirm-style="{'font-size': '36rpx', 'color': '#2E73E5'}"
			:show-cancel-button="true"
			cancel-text="再想想" 
			@confirm="confirmExamine"
		></u-modal>
	</view>
</template>

<script>
	import faNavbar from '@/components/fa-navbar/fa-navbar.vue'
	export default {
		components: {
			faNavbar
		},
		data() {
			return {
				showModal: false,
				contentModal: '确认后资产将从该房产中移除，无法恢复',
				handleDetail: '',
				handleTipsText: '',
				handleGuid: ''
			}
		},
		onLoad(options) {
			this.handleGuid = options.hGuid;
		},
		onShow() {
			this.getHandleDetail(this.handleGuid);
		},
		methods: {
			// 获取资产处置审核详情
			getHandleDetail(id) {
				let params = {
					ID: id
				}
				this.$api.getHandleDetail(params)
					.then(res => {
						if (res.code == 0) {
							this.handleDetail = res.data;
							this.handleTips(res.data.ApproveState, res.data.HandleType);
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})
					.catch(err => console.error(err));
			},
			
			// 相关状态对应提示语处理
			handleTips(approve, type) {
				if (type != 'ASSET_HANDLE_0005') { // 非转移类型的审核
				
					if (approve == 'ASSET_APPROVE_0001') {
						this.handleTipsText = '处置申请已提交，请审核'
					} else if (approve == 'ASSET_APPROVE_0002') {
						this.handleTipsText = '处置申请已通过';
					} else {
						this.handleTipsText = '处置申请未通过';
					}
					
				} else { // 转移类型的审核
				
					this.contentModal = '确认后资产将转移至目标房产中';
					if (approve == 'ASSET_APPROVE_0001') {
						this.handleTipsText = '转移申请已提交，请审核'
					} else if (approve == 'ASSET_APPROVE_0002') {
						this.handleTipsText = '转移申请已通过';
					} else {
						this.handleTipsText = '转移申请未通过';
					}
					
				}
				
			},
			
			// 通过审核
			confirmExamine() {
				uni.showLoading({title: '提交中'});
				let params = {
					Reason: "",
					HandleGuid: this.handleDetail.HandleGuid
				}
				this.$api.approvedHandle(params)
					.then(res => {
						uni.hideLoading();
						if (res.code == 0) {
							uni.showToast({ title: '提交成功'});
							setTimeout(() => {
								this.getHandleDetail(this.handleDetail.HandleGuid)
							}, 1000);
						} else {
							uni.showToast({ title: '提交失败，请稍后再试', icon: 'none'})
						}
					})
					.catch(err => console.error(err));
			},
			
			// 页面跳转
			toPage() {
				uni.navigateTo({
					url: `/pages/examine/rejectReason?hGuid=${this.handleDetail.HandleGuid}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.btn-plain {
		color: #3075E6 !important;
		border-color: #3075E6 !important;
		background-color: #FFFFFF !important;
	}
	.fa-handle-desc {
		padding-top: 34rpx;
		color: #666666;
	}
</style>
